// 草稿箱页面

import React, { useState, useEffect } from 'react';
import { Button, Table, Space, Card, App } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, EyeOutlined, PlusOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import { deleteNews, getDraftNews, submitNews } from '../../../api/newsApi';
import { News } from '../../../types/news';
import RegionBadge from '../../../components/common/RegionBadge';
import SimplePermissionButton from '../../../components/permission/SimplePermissionButton';
import SimplePermissionCheck from '../../../components/permission/SimplePermissionCheck';
import auth from '../../../utils/auth';
import { Category } from '../../../types';
import './News.scss';

const NewsDraft: React.FC = () => {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { message: appMessage, notification: appNotification, modal } = App.useApp(); // 使用App.useApp
  
  const [dataSource, setDataSource] = useState<News[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [refreshKey, setRefreshKey] = useState<number>(0);
  
  // 使用auth工具获取用户信息
  const userInfo = auth.getUserInfo() || {
    username: '未知用户',
    region: '未知区域',
    roleId: 0
  };
  
  const username = userInfo.username || '';
  const userRegion = userInfo.region || '';

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        
        // 获取用户的草稿箱新闻列表
        const newsData = await getDraftNews(username, userRegion);
        
        if (newsData) {
          // 直接使用返回的数据，不需要过多处理
          console.log('获取到的草稿箱数据:', newsData);
          
          // 简化处理逻辑，直接使用API返回的数据
          const processedData = newsData.map((item: Partial<News>): News => {
            // 确保category属性正确
            let category: Category | undefined = undefined;
            // 处理categoryId
            let categoryId: string | number = '';
            
            if (item.categoryId) {
              if (typeof item.categoryId === 'object' && '_id' in item.categoryId) {
                // 如果categoryId是对象且有_id属性，取_id值
                categoryId = item.categoryId._id;
              } else {
                // 否则直接使用
                categoryId = item.categoryId as string | number;
              }
            }
            
            if (item.category) {
              // 如果已有category对象
              category = item.category as Category;
            } else if (item.categoryId) {
              // 如果只有categoryId，创建简单的category对象
              category = {
                id: categoryId,
                title: '未分类', // 默认标题
                value: String(categoryId)
              };
            }
            
            return {
              id: item.id || '',
              _id: item._id,
              title: item.title || '',
              categoryId: categoryId,
              content: item.content || '',
              author: item.author || '',
              region: item.region || '',
              roleId: item.roleId || 0,
              auditState: item.auditState || 0,
              publishState: item.publishState || 0,
              createTime: item.createTime || Date.now(),
              star: item.star || 0,
              view: item.view || 0,
              seqId: item.seqId || 0,
              category
            };
          });
          
          // 直接使用处理后的数据，不需要再次过滤
          // API已经根据用户权限过滤了数据
          
          console.log('处理后的数据:', processedData);
          setDataSource(processedData);
        } else {
          setDataSource([]);
        }
        
        setLoading(false);
      } catch (err) {
        console.error('获取草稿箱数据失败:', err);
        appMessage.error('加载草稿箱数据失败');
        setLoading(false);
      }
    };

    fetchData();
  }, [refreshKey, username, userRegion, appMessage]);

  // 获取新闻的有效ID
  const getNewsId = (news: News): string | number => {
    // 基于操作类型选择ID格式
    // 对于删除操作，优先使用seqId
    // 对于其他操作（如提交审核、更新等），优先使用MongoDB的_id

    // 优先使用MongoDB的_id
    if (news._id) {
      return news._id;
    }
    // 其次使用id字段
    if (news.id) {
      return news.id;
    }
    // 最后使用seqId
    return news.seqId || '';
  };

  // 删除新闻 - 包含完整的错误处理
  const handleDelete = (news: News) => {
    // 获取ID，优先使用seqId
    const id = getNewsId(news);
    console.log(`准备删除新闻，使用ID: ${id}，新闻标题: ${news.title}`);
    
    // 使用App.useApp获取的modal
    modal.confirm({
      title: '确定要删除这篇新闻吗?',
      icon: <ExclamationCircleOutlined />,
      content: '删除后不可恢复',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        // 显示加载提示
        const hideLoading = appMessage.loading('正在删除...', 0);
        
        try {
          // 立即执行乐观更新UI
          setDataSource(prev => prev.filter(item => getNewsId(item) !== id));
          
          // 调用API删除
          console.log(`调用deleteNews API删除ID为 ${id} 的新闻`);
          const deleteResult = await deleteNews(id);
          
          // 关闭加载提示
          hideLoading();
          
          if (deleteResult.simulatedSuccess) {
            // 显示成功消息
            appMessage.success('删除成功');
            
            // 刷新缓存
            setTimeout(() => {
              queryClient.invalidateQueries({ queryKey: ['news', 'draft'] })
                .catch(cacheError => {
                  console.error('刷新缓存失败，但UI已更新:', cacheError);
                });
            }, 500);
          }
        } catch (error) {
          // 关闭加载提示
          hideLoading();
          
          // 即使出错也保持UI已更新
          console.error('删除处理出错，但UI已更新:', error);
          
          // 显示警告而不是错误，因为UI已经更新了
          appMessage.warning('删除请求发送失败，但界面已更新');
        }
      },
    });
  };

  // 更新新闻
  const handleEdit = (news: News) => {
    const id = getNewsId(news);
    navigate(`/news-manage/add/${id}`);
  };

  // 预览新闻
  const handlePreview = (news: News) => {
    const id = getNewsId(news);
    navigate(`/news-manage/preview/${id}`);
  };

  // 提交审核 - 简化版本
  const handleSubmit = (news: News) => {
    const id = getNewsId(news);
    
    // 使用App.useApp获取的modal
    modal.confirm({
      title: '确定要提交审核吗?',
      icon: <ExclamationCircleOutlined />,
      content: '提交后将进入审核流程',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        // 显示加载提示
        const hideLoading = appMessage.loading('正在提交...', 0);
        
        try {
          // 获取当前用户信息，确保权限检查正确
          const userInfo = auth.getUserInfo();
          
          // 直接从列表移除该项（乐观更新），不依赖API响应
          setDataSource(prev => prev.filter(item => getNewsId(item) !== id));
          
          // 为调试目的记录用户信息
          console.log('提交审核的用户信息:', userInfo);
          
          // 在后台继续尝试请求
          setTimeout(async () => {
            try {
              const submitResponse = await submitNews(id);
              
              // 关闭加载提示
              hideLoading();
              
              if (submitResponse && (submitResponse.code === 200 || submitResponse.code === 201)) {
                // 使用App.useApp获取的notification
                appNotification.success({
                  message: '提交成功',
                  description: '该新闻已提交审核',
                });
                
                // 刷新列表和缓存
                setRefreshKey(prev => prev + 1);
                queryClient.invalidateQueries({ queryKey: ['news', 'draft'] });
                queryClient.invalidateQueries({ queryKey: ['news', 'audit'] });
                
                // 导航到审核页面并传递refresh参数和时间戳，确保每次都是唯一的
                navigate(`/audit-manage/audit?refresh=true&t=${Date.now()}`);
              } else {
                // 即使API返回错误，UI已更新，所以只显示警告
                appNotification.warning({
                  message: '提交请求可能未成功',
                  description: submitResponse?.msg || '服务器未确认提交',
                });
              }
            } catch (error) {
              console.error('提交审核后台请求出错:', error);
              // 不重新加载数据，保持UI更新状态
            }
          }, 100);
          
          // 立即给用户显示成功提示
          appNotification.success({
            message: '提交成功',
            description: '该新闻已提交审核',
          });
        } catch (error) {
          // 关闭加载提示
          hideLoading();
          
          console.error('提交审核时出错:', error);
          appNotification.error({
            message: '提交失败',
            description: '网络错误或权限不足，请稍后重试',
          });
        }
      },
    });
  };

  // 创建新的新闻
  const handleCreateNews = () => {
    navigate('/news-manage/add');
  };

  // 定义表格列
  const columns = [
    {
      title: 'ID',
      dataIndex: 'seqId',
      width: 80
    },
    {
      title: '标题',
      dataIndex: 'title',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: '作者',
      dataIndex: 'author',
    },
    {
      title: '部门',
      dataIndex: 'region',
      render: (region: string) => <RegionBadge region={region} />,
    },
    {
      title: '操作',
      render: (_: unknown, record: News) => (
        <Space size="middle">
          <SimplePermissionButton 
            permission="delete.news"
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
            disabled={record.auditState !== 0}
          />
          <SimplePermissionButton
            permission="update.news"
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
            disabled={record.auditState !== 0}
          />
          <SimplePermissionButton
            permission="preview.news" 
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handlePreview(record)}
          />
          <SimplePermissionButton
            permission="submit.news"
            type="link"
            icon={<VerticalAlignTopOutlined />}
            onClick={() => handleSubmit(record)}
            disabled={record.auditState !== 0}
          />
        </Space>
      ),
    },
  ];

  return (
    <Card
      title="草稿箱"
      extra={
        <SimplePermissionCheck permission="add.news">
          <Button 
            type="primary" 
            icon={<PlusOutlined />}
            onClick={handleCreateNews}
          >
            撰写新闻
          </Button>
        </SimplePermissionCheck>
      }
      className="news-draft-card"
    >
      <p className="description">这里显示您创建但未提交审核的新闻资源</p>
      <Table 
        dataSource={dataSource} 
        columns={columns}
        pagination={{
          pageSize: 10,
          showTotal: (total) => `共 ${total} 条`,
        }}
        loading={loading}
        rowKey={record => String(record.seqId || record.id || record._id || '')}
      />
    </Card>
  );
};

export default NewsDraft; 